<template>
  <div ref="lineChart03" class="line-chart-03 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from 'vue'

const lineChart03 = ref(null)
const echarts = inject('$echarts')

// 参数
let xAxisData = [
  "2016",
  "2017",
  "2018",
  "2019",
  "2020",
  "2021",
  "2022",
  "2023",
];

let seriesData = [
  {
    name: '投资完成额',
    data: [4.25, 3.86, 4.84, 3.52, 2.93, 2.83, 3.1, 5.8]
  },
  {
    name: '投资数',
    data: [4, 3, 4, 3, 2, 2, 3, 5]
  }
];


const option = {
  compCode: 'C202309059',
  backgroundColor: "#0f375f",
  grid: {
    top: "25%",
    bottom: "10%", //也可设置left和right设置距离来控制图表的大小
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
  },
  legend: {
    icon: "rect",
    itemWidth: 25,
    itemHeight: 10,
    itemGap: 20,
    data: [seriesData[0].name, seriesData[1].name],
    top: "15%",
    textStyle: {
      color: "#ffffff"
    },
  },
  xAxis: {
    boundaryGap: false,
    data: xAxisData,
    axisLine: {
      show: true, //隐藏X轴轴线
      lineStyle: {
        color: "#ffffff",
      },
    },
    axisTick: {
      show: true, //隐藏X轴刻度
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#ffffff", //X轴文字颜色
      },
    },
  },
  yAxis: [
    {
      type: "value",
      name: "完成额（千万元）",
      nameTextStyle: {
        color: "#ffffff",
        fontSize: 12,
        fontFamily: 'Source Han Sans CN',
        fontWeight: 400
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ffffff",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
    },
    {
      type: "value",
      name: "投资数（个）",
      nameTextStyle: {
        color: "#fff",
        fontSize: 12,
        fontFamily: 'Source Han Sans CN',
        fontWeight: 400
      },
      position: "right",
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#FFFFFF",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#FFFFFF",
        },
      },
    }
  ],
  series: [
    {
      name: seriesData[0].name,
      type: "line",
      yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
      smooth: true, //平滑曲线显示
      itemStyle: {
        color: "rgba(55,214,175,1)",
      },
      lineStyle: {
        color: "rgba(55,214,175,1)",
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(55,214,175,0.6)",
            },
            {
              offset: 1,
              color: "rgba(55,214,175,0.001)",
            },
          ]),
        },
      },
      data: seriesData[0].data,
    },
    {
      name: seriesData[1].name,
      type: "line",
      yAxisIndex: 1,
      smooth: true,
      itemStyle: {
        color: "rgba(35,185,255,1)",
      },
      lineStyle: {
        color: "rgba(35,185,255,1)",
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(35,185,255,0.6)",
            },
            {
              offset: 1,
              color: "rgba(35,185,255,0.001)",
            },
          ]),
        },
      },
      data: seriesData[1].data,
    },
  ],
};


onMounted(() => {
  const chart = echarts.init(lineChart03.value)
  chart.setOption(option)
})
</script>

<style scoped></style>
